<template>
    <view class="components" @click="navInfo">
        <view class="image_black">
            <img class="image" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/wxLogo_icon.png"/>
        </view>
        <view class="info_black">
            <view class="info_header">
                <view class="info_name">姓名</view>
                <view class="info_position">吃饭达人</view>
                <view class="info_date">2023/11/24</view>
            </view>
            <view class="info_footer">
                <view class="info_content">hello word</view>
                <view class="info_time">12:34</view>
            </view>
        </view>

    </view>
</template>

<script>
var app = getApp()
export default {
    props: {
        dataDetail: {
            type: Object,
            default: null
        }
    },
    data() {
        return {

        }
    },
    methods: {
        navInfo() {
            this.$emit('onCclick', this.dataDetail)
        }
    }
}
</script>

<style scoped>
.components {
    width: 100%;
    height: 140rpx;
    border-radius: 16rpx;
    margin-bottom: 12rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.image_black {
    width: 140rpx;
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
}
.info_black {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-bottom: 2rpx solid #ededed;
    padding: 26rpx 20rpx 26rpx 0;
    box-sizing: border-box;
}
.info_header {
    width: 100%;
    height: 45rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.info_name {
    min-width: 10%;
    max-width: 40%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 8rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #494949;
    line-height: 45rpx;
}
.info_position {
    width: 60%;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #494949;
    line-height: 33rpx;
    height: 33rpx;
    flex: 1;
}
.info_date {
    width: 25%;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #9B9B9B;
    line-height: 33rpx;
    text-align: right;
}

.info_footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info_content {
    width: 90%;
    height: 40rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #9B9B9B;
    line-height: 33rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.info_time {
    width: 10%;
    height: 40rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #9B9B9B;
    line-height: 33rpx;
    text-align: right;
}
</style>
